<template>
  <div>
<div class="header">
          <el-tag
            style="width: 300px"
          >设备编号:{{devId}}</el-tag>
</div>
  <div class="body" style="width: 100%;height: 800px;margin:10px;">
    <div class="title" style="width:100%;">
      <el-row >
        <el-col :span="4" style="height:100%">
          <el-button  style="width: 150px" @click="showDingjingData()" >定检数据</el-button>
        </el-col>
        <el-col :span="4" style="height:100%">
          <el-button style="width: 150px"@click="showDianjianData()">点检数据</el-button>
        </el-col>
        <el-col :span="4" style="height:100%">
          <el-button style="width: 150px"@click="showJianceData1()">检测数据</el-button>
        </el-col>
        <el-col :span="4" style="height:100%">
          <el-button style="width: 150px"@click="showWeixiuData()">维修数据</el-button>
        </el-col>
        <el-col :span="4" style="height:100%">
          <el-button style="width: 150px"@click="showJiankongData()">监控数据</el-button>
        </el-col>
        <el-col :span="4" style="height:100%">
          <el-button style="width: 150px" @click="showJianceData2()">监测数据</el-button>
        </el-col>
<!--        <el-col :span="12" style="height:100%">-->
<!--          <div style="width: 90%;height:90%;text-align: center">-->
<!--            <label>红外监测图片</label>-->
<!--          </div>-->
<!--        </el-col>-->
      </el-row>


    </div>
    <div v-show="DingjingData" style="width: 90%;height: 80%;">
      <el-form :model="formValue" size="mini"  label-width="30%">
        <div style="margin: 1% 38%;">
          锅炉技术资料审查记录（锅炉概况）
        </div>
<!--        <el-form-item >锅炉技术参数：</el-form-item>-->
        <el-row style="width: 100%">

          <el-col :span="12">

            <el-form-item label="锅炉型号">
              <el-input  v-model="formValue.f006"></el-input>
            </el-form-item>
            <el-form-item label="产品编号">
              <el-input v-model="formValue.id"></el-input>
            </el-form-item>
            <el-form-item label="发证机构">
            <el-input v-model="formValue.f013"></el-input>
          </el-form-item>
            <el-form-item label="使用单位">
            <el-input v-model="formValue.f001"></el-input>
          </el-form-item>
            <el-form-item label="使用单位组织机构代码">
            <el-input v-model="formValue.f023"></el-input>
          </el-form-item>
            <el-form-item label="制造单位">
              <el-input v-model="formValue.f038"></el-input>
            </el-form-item>
            <el-form-item label="安装单位">
              <el-input v-model="formValue.f039"></el-input>
            </el-form-item>
            <el-form-item label="额定蒸发量">
            <el-input></el-input>
          </el-form-item>
            <el-form-item label="最大连续蒸发量">
            <el-input v-model="formValue.f144"></el-input>
          </el-form-item>
            <el-form-item label="启动分离器工作压力">
            <el-input v-model="formValue.f146"></el-input>
          </el-form-item>
            <el-form-item label="过滤器出口工作压力">
            <el-input v-model="formValue.f147"></el-input>
          </el-form-item>
            <el-form-item label="一次再热器出口工作压力">
              <el-input v-model="formValue.f149"></el-input>
            </el-form-item>
            <el-form-item label="二次再热器出口工作压力">
            <el-input ></el-input>
          </el-form-item>
            <el-form-item label="一次再热器入口工作压力">
            <el-input v-model="formValue.f148"></el-input>
          </el-form-item>
            <el-form-item label="二次再热器入口工作压力">
            <el-input ></el-input>
          </el-form-item>


          </el-col>
            <el-col :span="12">

              <el-form-item label="设备代码">
                <el-input v-model="formValue.f003"></el-input>
              </el-form-item>
              <el-form-item label="设备使用地点">
                <el-input v-model="formValue.f007"></el-input>
              </el-form-item>
              <el-form-item label="使用登记证编号">
              <el-input v-model="formValue.f017"></el-input>
            </el-form-item>
              <el-form-item label="产权单位">
                <el-input v-model="formValue.f110"></el-input>
              </el-form-item>
              <el-form-item label="单位内编号">
              <el-input v-model="formValue.f080"></el-input>
            </el-form-item>
              <el-form-item label="制造年月">
              <el-input v-model="formValue.f089"></el-input>
            </el-form-item>
              <el-form-item label="投产日期">
                <el-input v-model="formValue.f101"></el-input>
              </el-form-item>
              <el-form-item label="设计标准">
                <el-input v-model="formValue.f123"></el-input>
              </el-form-item>
              <el-form-item label="再热蒸汽流量">
              <el-input v-model="formValue.f145"></el-input>
            </el-form-item>
              <el-form-item label="温度">
              <el-input v-model="formValue.f135"></el-input>
            </el-form-item>
              <el-form-item label="温度">
              <el-input v-model="formValue.f151"></el-input>
            </el-form-item>

              <el-form-item label="温度">
                <el-input v-model="formValue.f153"></el-input>
              </el-form-item>
              <el-form-item label="温度">
                <el-input v-model="formValue.data2"></el-input>
              </el-form-item>
              <el-form-item label="温度">
              <el-input v-model="formValue.f152"></el-input>
            </el-form-item>
              <el-form-item label="温度">
              <el-input v-model="formValue.data2"></el-input>
            </el-form-item>

            </el-col>


        </el-row>

      </el-form>


    </div>
  </div>
  </div>


</template>

<script>
    import {serachDataCloudList} from "../../../../api/guolu/data-cloud";

    export default {
        name: "detail",
      props: {
        devId: {
          type: String,
          default: ''
        }
      },
      created() {
          this.DingjingData=false;
        this.DianjianData=false;
        this.Jiance1Data=false;
        this.JiankongData=false;
        this.WeixiuData=false;
        this.Jiance2Data=false;
      },
      data(){
          return{
            DingjingData:'',
            DianjianData:'',
            Jiance1Data:'',
            JiankongData:'',
            WeixiuData:'',
            Jiance2Data:'',
            formValue:{
              f006:''
            },
          }
      },
      methods:{
        switchList() {
          this.$emit("switchList");
        },
        async searchData() {
          this.loading = true
          const res = await serachDataCloudList(1, 100)
          this.loading = false
          // console.log(res)
          const list = res.data.data.list
          for(let i=0;i<list.length;i++){
            if(list[i].id==this.devId){
              this.formValue.f006=list[i].f006;
              this.formValue.id=list[i].id;
              this.formValue.f013=list[i].f013;
              this.formValue.f001=list[i].f001;
              this.formValue.f023=list[i].f023;
              this.formValue.f038=list[i].f038;
              this.formValue.f039=list[i].f039;
              this.formValue.f144=list[i].f144;
              this.formValue.f146=list[i].f146;
              this.formValue.f147=list[i].f147;
              this.formValue.f149=list[i].f149;

              this.formValue.f003=list[i].f003;
              this.formValue.f007=list[i].f007;
              this.formValue.f017=list[i].f017;
              this.formValue.f110=list[i].f110;
              this.formValue.f080=list[i].f080;
              this.formValue.f089=list[i].f089;
              this.formValue.f101=list[i].f101;
              this.formValue.f123=list[i].f123;
              this.formValue.f145=list[i].f145;
              this.formValue.f135=list[i].f135;
              this.formValue.f151=list[i].f151;
              this.formValue.f153=list[i].f153;
              this.formValue.f006=list[i].f006;
              this.formValue.f152=list[i].f152;
              this.formValue.f006=list[i].f006;

            }
          }
        },
        showDingjingData(){
          this.searchData();
          this.DingjingData=true;
          this.DianjianData=false;
          this.Jiance1Data=false;
          this.JiankongData=false;
          this.WeixiuData=false;
          this.Jiance2Data=false;

        },
        showDianjianData(){
          this.showDianjianData=true;
        },
        showJiance1Data(){
          this.showJiance1Data=true;
        },
        showWeixiuData(){
          this.showWeixiuData=true;
        },
        showJiankongData(){
          this.showJiankongData=true;
        },
        showJiance2Data(){
          this.showJiance2Data=true;
        },

      }
    }
</script>

<style scoped>

</style>
